<template>
  <lay-container fluid class="container-box">
    <!--查询条件-->
    <lay-card>
      <lay-form :model="searchModel" ref="searchForm" size="sm" labelWidth="80" class="search-form">

        <lay-form-item label="请求token" prop="requestToken" mode="inline" >
          <lay-input v-model="searchModel.requestToken" placeholder="请输入" allowClear />
        </lay-form-item>

        <lay-form-item label="用户账号" prop="userAccount" mode="inline" >
          <lay-input v-model="searchModel.userAccount" placeholder="请输入" allowClear />
        </lay-form-item>

        <lay-form-item label="请求ip" prop="requestIp" mode="inline" >
          <lay-input v-model="searchModel.requestIp" placeholder="请输入" allowClear />
        </lay-form-item>

        <lay-form-item mode="inline" v-permission="['sys:online:list']">
          <lay-button type="primary" @click="search" prefix-icon="layui-icon-search">
            查询
          </lay-button>
          <lay-button @click="searchReset" prefix-icon="layui-icon-refresh">
            重置
          </lay-button>
        </lay-form-item>
      </lay-form>

      <!-- table表格 -->
      <div class="table-box">
        <lay-table
            :page="page"
            :columns="columns"
            :id="id"
            :loading="loading"
            :default-toolbar="['filter','print']"
            :data-source="dataSource"
            :autoColsWidth="true"
            :resize="true"
            v-model:selected-key="selectedKey"
            @change="search"
            @sortChange="sortChange">

          <!--操作列-->
          <template v-slot:operator="{ row }">
            <lay-space>
              <lay-button v-permission="['sys:online:tickout']" @click="tickout(row)" prefix-icon="layui-icon-unlink" type="normal" size="sm">
                强退
              </lay-button>
            </lay-space>
          </template>

          <!--工具栏-->
          <template v-slot:toolbar>
            
          </template>
        </lay-table>
      </div>
    </lay-card>
  </lay-container>
</template>
<script setup lang="ts">

  import { ref, reactive ,onMounted} from 'vue'
  import { layer} from '@layui/layui-vue'
  import { pageApi,tickoutApi} from '../../../api/module/system/sys-online-user'
  import { dictSelectApi} from '../../../api/module/system/sys-dict'
  import {constant} from '../../../types/constant'

  //加载函数
  onMounted(() => {
    //查询数据
    search();
    //查询类型字典
    queryDictTypeItems(constant.LOG_TYPE_DICT_CODE);
  })

  //主键id
  const id = ref<string>("id")
  //表格数据源
  const dataSource = ref<any[]>([])
  //选中数据行id
  const selectedKey = ref<string>()
  //表格是否加载中
  const loading = ref<boolean>(false)
  //保存表单
  const saveForm = ref<any>()
  //查询条件表单
  const searchForm = ref<any>()
  //查询条件数据
  const searchModel = ref<any>({})

  //分页参数数据
  const page = reactive<any>({
    current: 1,
    limit: 10,
    total: 0
  })

  //排序参数数据
  const sortQuery = reactive<any>({
    sortField:'requestTime',
    sortType:'desc'
  })

  //操作类型选项
  const typeItems = ref<any[]>([])

  //表格字段
  const columns = ref<any[]>([
    { title: 'ID', width: '40px', key: 'id', type: 'radio', fixed: 'left',hide:"true"},
    { title: '请求token', width: '80px',key: 'requestToken',ellipsisTooltip:"true"},
    { title: '用户id', width: '80px',key: 'userId',ellipsisTooltip:"true",hide:"true"},
    { title: '用户账号', width: '60px',key: 'userAccount',ellipsisTooltip:"true"},
    { title: '用户名称', width: '60px',key: 'userName',ellipsisTooltip:"true"},
    { title: '请求ip', width: '80px',key: 'requestIp',ellipsisTooltip:"true"},
    { title: 'ip归属地', width: '100px',key: 'requestRegion',ellipsisTooltip:"true"},
    { title: '请求方式', width: '80px',key: 'requestMethod',ellipsisTooltip:"true",hide:"true"},
    { title: '请求参数', width: '80px',key: 'requestParam',ellipsisTooltip:"true",hide:"true"},
    { title: '浏览器', width: '80px',key: 'clientBrowser',ellipsisTooltip:"true"},
    { title: '操作系统', width: '80px',key: 'clientOs',ellipsisTooltip:"true"},
    { title: '请求url', width: '80px',key: 'requestUrl',ellipsisTooltip:"true",hide:"true"},
    { title: '最近请求时间', width: '100px',key: 'requestTime',ellipsisTooltip:"true"},
    { title: '耗时', width: '30px',key: 'costTime',ellipsisTooltip:"true",hide:"true"},
    { title: '错误信息', width: '80px',key: 'errorMsg',ellipsisTooltip:"true",hide:"true"},
    { title: '返回内容', width: '80px',key: 'responseContent',ellipsisTooltip:"true",hide:"true"},
    { title: '创建者', width: '80px',key: 'createUser',ellipsisTooltip:"true",hide:"true"},
    { title: '创建时间', width: '80px',key: 'createTime',ellipsisTooltip:"true",hide:"true"},
    { title: '更新者', width: '80px',key: 'updateUser',ellipsisTooltip:"true",hide:"true"},
    { title: '更新时间', width: '80px',key: 'updateTime',ellipsisTooltip:"true",hide:"true"},
    { title: '操作', width: '50px', key: 'operator',fixed: 'right',customSlot: 'operator'}
  ])

  
  //查询数据
  const search = async() => {
    loading.value = true
    await loadDataSource();
    loading.value = false
  }

  //排序查询
  const sortChange = (sortField: string, sortType: string) => {
    if(sortType){
      sortQuery.sortField = sortField;
      sortQuery.sortType = sortType;
      //查询数据
      search();
    }
  }

  //清除查询条件
  const searchReset = () => {
    searchForm.value.reset();
  }

  //加载表格数据
  const loadDataSource = () => {
    return new Promise<void>((resolve) => {
      pageApi(Object.assign(searchModel.value,{pageNum:page.current,pageSize:page.limit},sortQuery))
          .then(({ data, code, msg }) => {
            if (code == 200) {
              dataSource.value = data.list;
              page.total = data.total;
            }
          }).finally(()=>{
        resolve();
      })
    })
  }
  
 //获取类型字典选项
 const queryDictTypeItems = (dictCode: string) =>{
    dictSelectApi(dictCode)
      .then(({ data, code, msg }) => {
        if (code == 200) {
          typeItems.value = data;
        }
      })
  }

 //删除数据
 const tickout = (row:any) => {
    layer.confirm(`确认强退此用户？`, {
      title: '提示',
      btn: [{
        text: '确定',
        callback: (id: any) => {
          tickoutApi(row.requestToken).then(({ data, code, msg }) => {
            if (code == 200) {
              layer.msg('强退成功!')
              layer.close(id)
              search();
            }
          })
        }
      },{
        text: '取消',
        callback: (id: any) => {
          layer.close(id)
        }
      }]
    })
  }

</script>

<style scoped>

</style>